<template>
    <div class="car-root">
        <el-card shadow="hover" style="margin-bottom:10px" :body-style="{padding: '10px'}">
            <el-dropdown @command="handleCommand" class="el-dropdown-custom" trigger="click">
                <span class="el-dropdown-link">{{proTitle}}<i class="el-icon-arrow-down el-icon--right"></i></span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item v-for="project in projectInfo" :command="['p', project]" :key="project.id">{{project.name}}</el-dropdown-item>
                    <el-dropdown-item :command="['add', '/addproject']" v-if="projectInfo.length>0">Add Project</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
            <el-dropdown @command="handleCommand" class="el-dropdown-custom" trigger="click">
                <span class="el-dropdown-link">{{verTitle}}<i class="el-icon-arrow-down el-icon--right"></i></span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item v-for="version in versionInfo" :command="['v', version]" :key="version.id">{{version.name}}</el-dropdown-item>
                    <el-dropdown-item :command="['add', '/addversion']" v-if="versionInfo.length>0">Add Version</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
            <el-dropdown @command="handleCommand" class="el-dropdown-custom" trigger="click">
                <span class="el-dropdown-link">{{caseTitle}}<i class="el-icon-arrow-down el-icon--right"></i></span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item v-for="caseItem in caseInfo" :command="['c', caseItem]" :key="caseItem.id">{{caseItem.name}}</el-dropdown-item>
                    <el-dropdown-item :command="['add', '/addcase']" v-if="caseInfo.length>0">Add Case</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
            <el-select v-model="chartGroup" placeholder="请选择" @change="changeHandle">
                <el-option label="common" value="common"></el-option>
                <el-option label="echart4" value="echart4"></el-option>
                <el-option label="echart5" value="echart5"></el-option>
                <el-option label="echart6" value="echart6"></el-option>
            </el-select>
        </el-card>
        <template v-if="chartGroup=='common'">
            <h5>图形统计</h5>
            <el-card class="echart-wapper" shadow="hover" :body-style="{'display': 'flex'}">
                <v-chart :options="echartBarOpt" auto-resize class="echarts-bar"></v-chart>
                <v-chart :options="echartPieOpt" auto-resize class="echarts-pie"></v-chart>
            </el-card>
            <h5>表格统计</h5>
            <el-card shadow="hover">
                <el-table :data="dataList" max-height="150" border style="width: 100%;background-color:rgb(240,240,240)" :stripe="true">
                    <el-table-column prop="name"  label="所有省" ></el-table-column>
                    <el-table-column prop="value" label="省-1" ></el-table-column>
                    <el-table-column prop="value" label="省-2" ></el-table-column>
                    <el-table-column prop="value" label="省-3" ></el-table-column>
                    <el-table-column prop="value" label="省-4" ></el-table-column>
                    <el-table-column prop="value" label="省-5" ></el-table-column>
                    <el-table-column prop="value" label="省-6" ></el-table-column>
                    <el-table-column prop="value" label="省-7" ></el-table-column>
                </el-table>
                <el-pagination background layout="total, sizes, prev, pager, next, jumper" 
                    :total="dataList.length" 
                    :page-sizes="[10, 20, 30, 40, 50]"
                    :page-size="pageSize"
                    style="text-align:center;margin: 10px 0"
                    @current-change="currentChange"
                    @size-change="sizeChange"></el-pagination> 
            </el-card>
        </template>
        <template v-if="chartGroup=='echart4'">
            <h5>图形统计</h5>
            <el-card class="echart-wapper" shadow="hover" :body-style="{'display': 'flex'}">
                <v-chart :options="echartLineOpt" auto-resize class="echarts-bar"></v-chart>
                <v-chart :options="echartRadarOpt" auto-resize class="echarts-pie"></v-chart>
            </el-card>
            <h5>表格统计</h5>
            <el-card shadow="hover">
                <el-table :data="dataList" max-height="150" border style="width: 100%;background-color:rgb(240,240,240)" :stripe="true">
                    <el-table-column prop="name"  label="所有市" ></el-table-column>
                    <el-table-column prop="value" label="市-1" ></el-table-column>
                    <el-table-column prop="value" label="市-2" ></el-table-column>
                    <el-table-column prop="value" label="市-3" ></el-table-column>
                    <el-table-column prop="value" label="市-4" ></el-table-column>
                    <el-table-column prop="value" label="市-5" ></el-table-column>
                    <el-table-column prop="value" label="市-6" ></el-table-column>
                    <el-table-column prop="value" label="市-7" ></el-table-column>
                </el-table>
                <el-pagination background layout="total, sizes, prev, pager, next, jumper" 
                    :total="dataList.length" 
                    :page-sizes="[10, 20, 30, 40, 50]"
                    :page-size="pageSize"
                    style="text-align:center;margin: 10px 0"
                    @current-change="currentChange"
                    @size-change="sizeChange"></el-pagination> 
            </el-card>
        </template>
        <template v-if="chartGroup=='echart5'">
            <h5>图形统计</h5>
            <el-card class="echart-wapper" shadow="hover" :body-style="{'display': 'flex'}">
                <v-chart :options="echartBarOpt" auto-resize class="echarts-bar"></v-chart>
                <v-chart :options="echartGaugeOpt" auto-resize class="echarts-pie"></v-chart>
            </el-card>
            <h5>表格统计</h5>
            <el-card shadow="hover">
                <el-table :data="dataList" max-height="150" border style="width: 100%;background-color:rgb(240,240,240)" :stripe="true">
                    <el-table-column prop="name"  label="地区" ></el-table-column>
                    <el-table-column prop="value" label="地区-1" ></el-table-column>
                    <el-table-column prop="value" label="地区-2" ></el-table-column>
                    <el-table-column prop="value" label="地区-3" ></el-table-column>
                    <el-table-column prop="value" label="地区-4" ></el-table-column>
                    <el-table-column prop="value" label="地区-5" ></el-table-column>
                    <el-table-column prop="value" label="地区-6" ></el-table-column>
                    <el-table-column prop="value" label="地区-7" ></el-table-column>
                </el-table>
                <el-pagination background layout="total, sizes, prev, pager, next, jumper" 
                    :total="dataList.length" 
                    :page-sizes="[10, 20, 30, 40, 50]"
                    :page-size="pageSize"
                    style="text-align:center;margin: 10px 0"
                    @current-change="currentChange"
                    @size-change="sizeChange"></el-pagination> 
            </el-card>
        </template>
        <template v-if="chartGroup=='echart6'">
            <h5>图形统计</h5>
            <el-card class="echart-wapper" shadow="hover" :body-style="{'display': 'flex'}">
                <v-chart :options="echartBarOpt" auto-resize class="echarts-bar"></v-chart>
                <v-chart :options="echartGaugeOpt" auto-resize class="echarts-pie"></v-chart>
            </el-card>
            <h5>表格统计</h5>
            <el-card shadow="hover">
                <el-table :data="dataList" max-height="150" border style="width: 100%;background-color:rgb(240,240,240)" :stripe="true">
                    <el-table-column prop="name"  label="地区" ></el-table-column>
                    <el-table-column prop="value" label="地区-1" ></el-table-column>
                    <el-table-column prop="value" label="地区-2" ></el-table-column>
                    <el-table-column prop="value" label="地区-3" ></el-table-column>
                    <el-table-column prop="value" label="地区-4" ></el-table-column>
                    <el-table-column prop="value" label="地区-5" ></el-table-column>
                    <el-table-column prop="value" label="地区-6" ></el-table-column>
                    <el-table-column prop="value" label="地区-7" ></el-table-column>
                </el-table>
                <el-pagination background layout="total, sizes, prev, pager, next, jumper" 
                    :total="dataList.length" 
                    :page-sizes="[10, 20, 30, 40, 50]"
                    :page-size="pageSize"
                    style="text-align:center;margin: 10px 0"
                    @current-change="currentChange"
                    @size-change="sizeChange"></el-pagination> 
            </el-card>
        </template>
    </div>
</template>

<script>
import areaData from 'china-area-data'
import ECharts from 'vue-echarts/components/ECharts'
import 'echarts/lib/chart/bar'
import 'echarts/map/js/world'
import echartBarOpt from './echartBarOpt'
import echartPieOpt from './echartPieOpt'
import echartLineOpt from './echartLineOpt'
import echartRadarOpt from './echartRadarOpt'
import echartGaugeOpt from './echartGaugeOpt'
import { getCarCount, getProjectInfo } from '@/api/index'
import storage from "@/utils/storage"
export default {
  name: 'index',
  data() {
    return {
      provList: areaData[86],
      cityList: [],
      pageSize: 10,
      currentPage: 0,
      xAxisData: [],
      echartTitle: "",
      echartBarOpt: {},
      echartPieOpt: {},
      echartLineOpt: {},
      echartRadarOpt: {},
      echartGaugeOpt: {},
      dataList: [],
      chartGroup: 'common',
      projectInfo: [],
      versionInfo: [],
      caseInfo: [],
      proTitle: "项目",
      verTitle: "版本",
      caseTitle: "情况"
    }
  },
  mounted() {
    this.searchForm();
    this.initProjet();
  },
  methods: {
      changeHandle(level) {
          this.searchByFilter();
          
      },
    searchByFilter() {
        let params = {
            pageSize: this.pageSize,
            currentPage: this.currentPage
        }
        getCarCount(params).then(res => {
            let data = [];
            Object.values(this.xAxisData).map((item,i) => {
                let el = {
                        name: item,
                        value: Object.values(res.data)[i]
                    }
                data.push(el)
            });
            this.dataList = data;
            switch (this.chartGroup) {
                case 'echart4':
                    this.echartLineOpt = echartLineOpt(this.echartTitle, this.xAxisData, Object.values(res.data).splice(0, this.xAxisData.length));
                    this.echartRadarOpt = echartRadarOpt(this.echartTitle, this.xAxisData, Object.values(res.data).splice(0, this.xAxisData.length));
                    break;
                case 'echart5':
                    this.echartBarOpt = echartBarOpt(this.echartTitle, this.xAxisData, Object.values(res.data).splice(0, this.xAxisData.length));
                    this.echartGaugeOpt = echartGaugeOpt(this.echartTitle, Object.values(res.data).splice(0, this.xAxisData.length)[0]);
                    break;
                case 'echart6':
                    this.echartBarOpt = echartBarOpt(this.echartTitle, this.xAxisData, Object.values(res.data).splice(0, this.xAxisData.length));
                    this.echartGaugeOpt = echartGaugeOpt(this.echartTitle, Object.values(res.data).splice(0, this.xAxisData.length)[0]);
                    break;
                default:
                    this.echartBarOpt = echartBarOpt(this.echartTitle, this.xAxisData, Object.values(res.data).splice(0, this.xAxisData.length));
                    this.echartPieOpt = echartPieOpt(this.echartTitle, data);
                    break;
            }
        });
      },
      currentChange(currentPage) {
          this.currentPage = currentPage;
          this.searchByFilter();
      },
      sizeChange(size) {
          this.pageSize = size;
          this.searchByFilter();
      },
      searchForm() {
          this.xAxisData = Object.values(this.provList);
          this.searchByFilter();
      },
      initProjet() {
          getProjectInfo().then(res => {
              this.projectInfo = res.data;
          });
      },
      handleCommand(command) {
        let [type, data] = command;
        if (type == 'add') {
            this.$router.push({path: data, query: {type: 'add'}});
            return;
        }
        if (type == 'p') {
            this.versionInfo = data.children;
            storage.set("curProject", data);
            this.proTitle = data.name;
        }
        if (type == 'v') {
            this.caseInfo = data.children;
            storage.set("curVersion", data);
            this.verTitle = data.name;
        }
        if (type == 'c') {
            this.caseTitle = data.name;
            storage.set("curCase", data);
        }
      },
      handleItem(type, path, data) {
          if (path == '/addproject') {
              storage.set("curProject", data);
          }
          if (path == '/addversion') {
              storage.set("curVersion", data);
          }
          if (path == '/addcase') {
              storage.set("curCase", data);
          }
        this.$router.push({path: path, query: {type: type}});
      }
  },
  components: {
    'v-chart': ECharts
  }
}
</script>

<style lang="stylus" scoped>
.echarts-bar
    flex 1
.echarts-pie
    flex 1
.car-root
    h5 
        color #777 
.el-form-item
    display inline-block
    margin 0
.el-dropdown-custom
    height 32px
    line-height 32px
    min-width 80px
    text-align center 
    margin-right 50px
    background #ff8400
    position relative
    color #ffffff
    &:first-child
        min-width 100px
    &:after
        position absolute
        right -32px
        top 0
        content ""
        width 0
        height 0
        border 16px solid transparent
        border-left-color #ff8400
    &:not(:first-child):before
        position absolute
        left -32px
        top 0
        content ""
        width 0
        height 0
        border 16px solid #ff8400
        border-left-color #ffffff 
.el-dropdown-link 
    cursor pointer
.pro-name
    margin-right 10px
.el-icon-custom
    padding 0 5px
</style>
